<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>Login Page</title>
    <style type="text/css">
        .main{
            width: 400px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="main">
        <h3>Login Page</h3>
        <div>
             <table>
                 <tr>
                     <td>UserName:<input type="text" name="userName"/></td>
                 </tr>
                 <tr>
                     <td>Password:<input type="password" name="password"/></td>
                 </tr>
                 <tr>
                     <td><button id="but_login">登录</button></td>
                 </tr>
             </table>
        </div>
    </div>

    <script type="text/javascript" th:src="@{/scripts/jquery.js}" src="/scripts/jquery.js"></script>
    <script type="text/javascript">
       $(function(){
           $('#but_login').click(function(){
               var userName = $('input[name="userName"]').val();
               var password = $('input[name="password"]').val();

               if(userName == null || userName == '') {
                   alert('请输入userName');
                   return false;
               }

               if(password == null || password == '') {
                   alert('请输入password');return false;
               }

               var data = {
                   "userName" : userName,
                   "password" : password
               };
               $.ajax({
                   type : 'post',
                   url : '/user/login',
                   data : JSON.stringify(data),
                   dataType : 'json',
                   contentType : 'application/json',
                   success : function(result){
                       console.info(result);
                       if(result.success){
                           window.location.href = '/page/index';
                       } else {
                           alert(result.message);
                       }
                   }
               });
           });

       });
    </script>
</body>
</html>